<!--  -->
<template>
 <div class="program">
     <header><Balse @goDo='youDo'/></header>
     <main>
         <component :is="currentTabComponent"></component>
     </main>
 </div>
</template>

<script>
import Balse from '@/components/admin/tubguest/progom/Balse.vue'
import Document from '@/components/admin/tubguest/progom/navigation/Document.vue'
import Management from '@/components/admin/tubguest/progom/navigation/Management.vue'
import Monitoring from '@/components/admin/tubguest/progom/navigation/Monitoring.vue'
export default {
 components:{
     Balse,
     Document,
     Management,
     Monitoring
 },
 data () {
  return {
      currutIndex:0,
      arr:["Management","Document","Monitoring"]
  }
 },
 created(){

 },
 methods:{
     youDo(data){
         this.currutIndex=data
     }
 },
computed:{
    currentTabComponent(){
       return this.arr[this.currutIndex]
    }

}
}
</script>

<style lang='scss' scoped>
    .program{
        width: 100%;
        height: auto;
        background: #F0F2F5;
        header {
            width: 100%;
            background: #fff;
            height: 66px;
        }
        main{
            margin-top: 20px;
            width: 100%;
            height: 887px;
          
        }
    }
</style>
